<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Oren Video Template</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<link rel="icon" href="images/Favicon.png">
	<link rel="stylesheet" type="text/css" href="css/animate.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/fontello.css">
	<link rel="stylesheet" type="text/css" href="css/fontello-codes.css">
	<link rel="stylesheet" type="text/css" href="css/thumbs-embedded.css">
	<link rel="stylesheet" type="text/css" href="css/video-js.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/responsive.css">
	<link rel="stylesheet" type="text/css" href="css/color.css">
	<link rel="stylesheet" type="text/css" href="css/custom-improvements.css">
	<link rel="stylesheet" type="text/css" href="css/video-page-improvements.css">
	<link rel="stylesheet" type="text/css" href="css/font-improvements.css">
	<link rel="stylesheet" type="text/css" href="css/animations.css">

</head>

<body>
	<div id="myapp">
		<div class="wrapper">

			<header>

				<div class="btm_bar">
					<div class="container">
						<div class="btm_bar_content">
							<nav>
								<ul>
									<li><a href="#" title="">Pages</a>
										<div class="mega-menu">
											<ul>
												<li><a href="index.html" title="">Homepage</a></li>
												<li><a href="single_video_page.html" title="">Single Video Page</a></li>
												<li><a href="Single_Video_Simplified_Page.html" title="">Single Video
														Simplified Page</a></li>
												<li><a href="single_video_fullwidth_page.html" title="">Singel Video
														Full
														Width Page</a></li>
												<li><a href="single_video_playlist.html" title="">Single Video Playlist
														Page</a></li>
												<li><a href="Upload_Video.html" title="">Upload Video Page</a></li>
												<li><a href="Upload_Edit.html" title="">Upload Video Edit Page</a></li>
												<li><a href="Browse_Channels.html" title="">Browse channels page</a>
												</li>
												<li><a href="Searched_Videos_Page.html" title="">Searched videos
														page</a>
												</li>
											</ul>
											<ul>
												<li><a href="#" title="">Single channel <span
															class="icon-arrow_below"></span></a>
													<ul>
														<li><a href="Single_Channel_Home.html" title="">Single Channel
																Home
																page</a></li>
														<li><a href="Single_Channel_Videos.html" title="">Single Channel
																videos page</a></li>
														<li><a href="Single_Channel_Playlist.html" title="">single
																channel
																playlist page</a></li>
														<li><a href="Single_Channel_Channels.html" title="">single
																channel
																channels page</a></li>
														<li><a href="Single_Channel_About.html" title="">single channel
																about page</a></li>
														<li><a href="Single_Channel_Products.html" title="">single
																channel
																products page</a></li>
													</ul>
												</li>
												<li><a href="History_Page.html" title="">History page</a></li>
												<li><a href="Browse_Categories.html" title="">Browse Categories Page</a>
												</li>
												<li><a href="Updates_From_Subs.html" title="">Updates from subscription
														page</a></li>
												<li><a href="login.html" title="">login page</a></li>
												<li><a href="signup.html" title="">signup page</a></li>
												<li><a href="User_Account_Page.html" title="">User account page</a></li>
											</ul>
										</div>
									</li>
									<li><a href="Browse_Categories.html" title="">Categories</a></li>
									<li><a href="Browse_Channels.html" title="">Channels</a></li>
									<li><a href="#" title="">Trending</a></li>
									<li><a href="Single_Channel_Home.html" title="">LIVE</a></li>
									<li><a href="#" title="">Movies</a></li>
								</ul>
							</nav><!--navigation end-->
							<ul class="shr_links">
								<li>
									<h3>Go to : </h3>
								</li>
								<li>
									<button data-toggle="tooltip" data-placement="top" title="Like">
										<i class="icon-like"></i>
									</button>
								</li>
								<li>
									<button data-toggle="tooltip" data-placement="top" title="Watch later">
										<i class="icon-watch_later"></i>
									</button>
								</li>
								<li>
									<button data-toggle="tooltip" data-placement="top" title="Playlist">
										<i class="icon-playlist"></i>
									</button>
								</li>
								<li>
									<button data-toggle="tooltip" data-placement="top" title="Purchased">
										<i class="icon-purchased"></i>
									</button>
								</li>
								<li>
									<button data-toggle="tooltip" data-placement="top" title="History">
										<i class="icon-history"></i>
									</button>
								</li>
							</ul><!--shr_links end-->
							<ul class="vid_thums">
								<li>
									<a class="active" href="#" title=""><i class="icon-grid"></i></a>
								</li>
								<li>
									<a href="#" title="">
										<svg xmlns="http://www.w3.org/2000/svg"
											xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
											viewBox="0 0 108 108" xml:space="preserve">
											<rect width="63" height="45" />
											<rect x="81" width="27" height="45" />
											<rect x="45" y="63" width="63" height="45" />
											<rect y="63" width="27" height="45" />
										</svg>
									</a>
								</li>
							</ul><!--vid_status end-->
							<div class="clearfix"></div>
						</div><!--btm_bar_content end-->
					</div>
				</div><!--btm_bar end-->
			</header><!--header end-->

			<div class="side_menu">
				<div class="form_dvv">
					<a href="#" title="" class="login_form_show">Sign in</a>
				</div>
				<div class="sd_menu">
					<ul class="mm_menu">
						<li>
							<span>
								<i class="icon-home"></i>
							</span>
							<a href="#" title="">Home</a>
						</li>
						<li>
							<span>
								<i class="icon-fire"></i>
							</span>
							<a href="#" title="">Trending</a>
						</li>
						<li>
							<span>
								<i class="icon-subscriptions"></i>
							</span>
							<a href="#" title="">Subscriptions</a>
						</li>
					</ul>
				</div><!--sd_menu end-->
				<div class="sd_menu">
					<h3>Library</h3>
					<ul class="mm_menu">
						<li>
							<span>
								<i class="icon-history"></i>
							</span>
							<a href="#" title="">History</a>
						</li>
						<li>
							<span>
								<i class="icon-watch_later"></i>
							</span>
							<a href="#" title="">Watch Later</a>
						</li>
						<li>
							<span>
								<i class="icon-purchased"></i>
							</span>
							<a href="#" title="">Purchases</a>
						</li>
						<li>
							<span>
								<i class="icon-like"></i>
							</span>
							<a href="#" title="">Liked Videos</a>
						</li>
						<li>
							<span>
								<i class="icon-play_list"></i>
							</span>
							<a href="#" title="">Playlist</a>
						</li>
					</ul>
				</div><!--sd_menu end-->
				<div class="sd_menu subs_lst">
					<h3>Subscriptions</h3>
					<ul class="mm_menu">
						<li>
							<span class="usr_name">
								<img src="images/resources/th1.png" alt="">
							</span>
							<a href="#" title="">Dr Disrespect</a>
							<small>3</small>
						</li>
						<li>
							<span class="usr_name">
								<img src="images/resources/th2.png" alt="">
							</span>
							<a href="#" title="">ASMR</a>
							<small>6</small>
						</li>
						<li>
							<span class="usr_name">
								<img src="images/resources/th3.png" alt="">
							</span>
							<a href="#" title="">Rivvrs</a>
							<small>2</small>
						</li>
						<li>
							<span class="usr_name">
								<img src="images/resources/th4.png" alt="">
							</span>
							<a href="#" title="">The Verge</a>
							<small>11</small>
						</li>
						<li>
							<span class="usr_name">
								<img src="images/resources/th5.png" alt="">
							</span>
							<a href="#" title="">Seeker</a>
							<small>3</small>
						</li>
						<li>
							<span class="usr_name">
								<img src="images/resources/sn.png" alt="">
							</span>
							<a href="#" title="">Music</a>
							<small>20</small>
						</li>
					</ul>
					<a href="#" title="" class="more-ch"><i class="icon-arrow_below"></i> Show 14 more</a>
				</div><!--sd_menu end-->
				<div class="sd_menu">
					<ul class="mm_menu">
						<li>
							<span>
								<i class="icon-settings"></i>
							</span>
							<a href="#" title="">Settings</a>
						</li>
						<li>
							<span>
								<i class="icon-flag"></i>
							</span>
							<a href="#" title="">Report history</a>
						</li>
						<li>
							<span>
								<i class="icon-logout"></i>
							</span>
							<a href="#" title="">Sign out</a>
						</li>
					</ul>
				</div><!--sd_menu end-->
				<div class="sd_menu m_linkz">
					<ul class="mm_menu">
						<li><a href="#">About</a></li>
						<li><a href="#">Community Rules </a></li>
						<li><a href="#">Privacy</a></li>
						<li><a href="#">Terms</a></li>
						<li><a href="#">Blogs</a></li>
						<li><a href="#">Contracts </a></li>
						<li><a href="#">Donate</a></li>
						<li><a href="#">FAQ</a></li>
					</ul>
					<span>azyrusthemes</span>
				</div><!--sd_menu end-->
				<div class="sd_menu bb-0">
					<ul class="social_links">
						<li>
							<a href="#" title="">
								<i class="icon-facebook-official"></i>
							</a>
						</li>
						<li>
							<a href="#" title="">
								<i class="icon-twitter"></i>
							</a>
						</li>
						<li>
							<a href="#" title="">
								<i class="icon-instagram"></i>
							</a>
						</li>
					</ul><!--social_links end-->
				</div><!--sd_menu end-->
				<div class="dd_menu"></div>
			</div><!--side_menu end-->


			<section class="mn-sec">
				<div class="container">
					<!-- 用户信息栏 -->
					<div class="row mb-3">
						<div class="col-12">
							<div class="d-flex justify-content-between align-items-center">
								<div>
									<a href="index.html" class="btn btn-outline-primary">
										<i class="icon-arrow_left"></i> 返回首页
									</a>
								</div>
								<div v-if="user.isLoggedIn" class="user-info">
									<span class="text-muted">欢迎, </span>
									<strong>{{ user.info.username }}</strong>
									<a href="login.html" class="btn btn-sm btn-outline-secondary ml-2" @click="authManager.logout()">
										<i class="icon-logout"></i> 登出
									</a>
								</div>
								<div v-else class="auth-links">
									<a href="login.html" class="btn btn-sm btn-outline-primary mr-1">登录</a>
									<a href="register.html" class="btn btn-sm btn-outline-success">注册</a>
								</div>
							</div>
						</div>
					</div>
					
					<div class="row">
						<div class="col-lg-9">
							<div class="mn-vid-sc single_video">
								<div class="vid-1">
									<div class="vid-pr">
										<video :id="'my-video-'+ video.id" class="video-js" controls preload="auto"
											width="640" height="264" :poster="video.image">
											<source :src="video.video" type="video/mp4" />
										</video>
									</div><!--vid-pr end-->
									<div class="vid-info">
										<h3>{{ video.name }}</h3>
										<div class="info-pr">
											<span>{{ video.views || 0 }} views</span>
											<ul class="pr_links">
												<li>
													<button @click="toggleLike" :class="{ 'liked': isLiked }" 
														data-toggle="tooltip" data-placement="top" title="点赞">
														<i class="icon-thumbs_up_fill"></i>
													</button>
													<span>{{ likeCount }}</span>
												</li>
												<li>
													<button data-toggle="tooltip" data-placement="top"
														title="I dislike this">
														<i class="icon-thumbs_down_fill"></i>
													</button>
													<span>28K</span>
												</li>
											</ul>
											<div class="clearfix"></div>
										</div><!--info-pr end-->
									</div><!--vid-info end-->
								</div><!--vid-1 end-->


							</div><!--mn-vid-sc end--->
						</div><!---col-lg-9 end-->
						<div class="col-lg-3">
							<div class="video-update-form">
								<h4>Update Video Info</h4>
								<div class="form-group">
									<label for="video-name">Video Title</label>
									<input type="text" class="form-control" id="video-name" v-model="video.name">
								</div>
								<div class="form-group">
									<label for="video-info">Description</label>
									<textarea class="form-control" id="video-info" rows="3"
										v-model="video.info"></textarea>
								</div>
								<button class="btn btn-primary" @click="update_video">Update Info</button>

								<div class="delete-section"
									style="margin-top: 30px; border-top: 1px solid #eee; padding-top: 20px;">
									<h4>Danger Zone</h4>
									<p>删除后将无法恢复，请谨慎操作</p>
									<button class="btn btn-danger" @click="confirmDelete">
										<i class="icon-trash"></i> Delete Video
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section><!--mn-sec end-->

			<section class="more_items_sec text-center">
				<div class="container">
					<a href="#" title="">
						<svg width="19" height="24" viewBox="0 0 19 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path
								d="M18.1618 24.0001H0.838235C0.374412 24.0001 0 23.6261 0 23.1628V5.86052C0 5.39727 0.374412 5.02332 0.838235 5.02332H18.1618C18.6256 5.02332 19 5.39727 19 5.86052V23.1628C19 23.6261 18.6256 24.0001 18.1618 24.0001ZM1.67647 22.3256H17.3235V6.69773H1.67647V22.3256Z"
								fill="#9494A0" />
							<g opacity="0.25">
								<path opacity="0.25"
									d="M13.1324 4.18605C12.6685 4.18605 12.2941 3.81209 12.2941 3.34884V1.67442H6.70589V3.34884C6.70589 3.81209 6.33148 4.18605 5.86765 4.18605C5.40383 4.18605 5.02942 3.81209 5.02942 3.34884V0.83721C5.02942 0.373954 5.40383 0 5.86765 0H13.1324C13.5962 0 13.9706 0.373954 13.9706 0.83721V3.34884C13.9706 3.81209 13.5962 4.18605 13.1324 4.18605Z"
									fill="#9494A0" />
							</g>
							<path
								d="M9.50001 19.3479C9.28487 19.3479 9.06972 19.267 8.90766 19.1024L5.92634 16.1275C5.59942 15.801 5.59942 15.2707 5.92634 14.9442C6.25325 14.6177 6.78413 14.6177 7.11104 14.9442L9.50001 17.3275L11.8862 14.9442C12.2131 14.6177 12.744 14.6177 13.0709 14.9442C13.3978 15.2707 13.3978 15.801 13.0709 16.1275L10.0924 19.1024C9.93031 19.267 9.71516 19.3479 9.50001 19.3479Z"
								fill="#9494A0" />
							<path
								d="M9.49999 18.4186C9.03617 18.4186 8.66176 18.0447 8.66176 17.5814V10.3256C8.66176 9.86236 9.03617 9.4884 9.49999 9.4884C9.96382 9.4884 10.3382 9.86236 10.3382 10.3256V17.5814C10.3382 18.0447 9.96382 18.4186 9.49999 18.4186Z"
								fill="#9494A0" />
							<g opacity="0.5">
								<path opacity="0.5"
									d="M15.6471 6.69764C15.1832 6.69764 14.8088 6.32369 14.8088 5.86043V4.18601H4.19118V5.86043C4.19118 6.32369 3.81677 6.69764 3.35294 6.69764C2.88912 6.69764 2.51471 6.32369 2.51471 5.86043V3.34881C2.51471 2.88555 2.88912 2.5116 3.35294 2.5116H15.6471C16.1109 2.5116 16.4853 2.88555 16.4853 3.34881V5.86043C16.4853 6.32369 16.1109 6.69764 15.6471 6.69764Z"
									fill="#9494A0" />
							</g>
						</svg>
					</a>
				</div>
			</section><!--more_items_sec end-->

		</div><!--wrapper end-->



	</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	<script src="js/jquery.min.js"></script>
	<script src="js/popper.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/video.js"></script>
	<script src="js/script.js"></script>
	<script src="js/auth.js"></script>
<script>
	let app = new Vue({
		el: "#myapp",
		data: {
			video: {},
			isLiked: false,
			likeCount: 0,
			user: {
				isLoggedIn: false,
				info: {}
			}
		},
		methods: {
			get_one_video: function () {
				const urlParams = new URLSearchParams(window.location.search);
				const video_id = urlParams.get('id');
				$.ajax({
					url: `/video/${video_id}`,
					type: "GET",
					context: this,
					dataType: "json",
					// success: function (result) {
					// 	console.log("视频数据:", result);
					// 	this.video = result; 
					// 	this.$nextTick(() => {
					// 		videojs(`my-video-${video_id}`);
					// 	});
					// },
					success: function (result) {
						this.video = result;
						this.$nextTick(() => {
							const playerId = `my-video-${result.id}`;
							const videoElement = document.getElementById(playerId);

							// 检查元素是否存在
							if (!videoElement) {
								console.error(`找不到视频元素 #${playerId}`);
								return;
							}

							// 清理旧实例（如果存在）
							if (videojs.getPlayer(playerId)) {
								videojs.getPlayer(playerId).dispose();
							}

							// 初始化新实例
							const player = videojs(videoElement, {
								autoplay: false,
								controls: true
							});

							// 强制更新视频源（解决可能的缓存问题）
							player.src({ type: 'video/mp4', src: result.video });
						});
					},
					error: function (xhr, status, error) {
						console.error("请求失败:", error);
						alert("加载视频失败，请检查网络或后端服务！");
					}
				});
			},
			update_video: function () {
				$.ajax({
					url: `/video/${this.video.id}`,
					type: "PUT",
					data: JSON.stringify(this.video),
					contentType: "application/json",
					context: this,
					success: function (result, status, xhr) {
						alert("视频修改成功");
						window.location.reload();
					},
					error: function (xhr, status, error) {
						console.error("更新失败:", error);
						alert("更新视频信息失败！");
					}
				})
			},
			confirmDelete: function () {
				if (confirm("确定要删除这个视频吗？此操作不可撤销！")) {
					this.delete_video();
				}
			},
			isLoggedIn: function () {
				return authManager.isLoggedIn();
			},
			checkUserStatus: function() {
				this.user.isLoggedIn = authManager.isLoggedIn();
				if (this.user.isLoggedIn) {
					this.user.info = authManager.getUserInfo();
				}
			},
			loadLikeStatus: function () {
				const urlParams = new URLSearchParams(window.location.search);
				const video_id = urlParams.get('id');
				
				$.ajax({
					url: `/video/${video_id}/like/status`,
					type: "GET",
					context: this,
					success: function (result) {
						if (result.result) {
							this.isLiked = result.liked;
							this.likeCount = result.count;
						}
					},
					error: function (xhr, status, error) {
						console.error("获取点赞状态失败:", error);
					}
				});
			},
			toggleLike: function () {
				if (!this.isLoggedIn()) {
					alert("请先登录再进行点赞操作！");
					window.location.href = "login.html";
					return;
				}

				const urlParams = new URLSearchParams(window.location.search);
				const video_id = urlParams.get('id');
				
				authManager.authenticatedRequest({
					url: `/video/${video_id}/like`,
					type: "POST",
					context: this,
					success: function (result) {
						if (result.result) {
							this.isLiked = result.liked;
							this.likeCount = result.count;
						}
					},
					error: function (xhr, status, error) {
						console.error("点赞操作失败:", error);
						alert("点赞操作失败，请稍后重试！");
					}
				});
			},
			delete_video: function () {
				$.ajax({
					url: `/video/${this.video.id}`,
					type: "DELETE",
					context: this,
					success: function (result, status, xhr) {
						alert("删除视频成功");
						window.location.href = "/index.html";
					},
					error: function (xhr, status, error) {
						console.error("删除失败:", error);
						alert("删除视频失败！");
					}
				})
			}
		}
	});
	
	// 初始化认证状态
	authManager.initPage();
	app.checkUserStatus();
	app.get_one_video();
	app.loadLikeStatus();
</script>

<style>
.liked {
    color: #ff6b6b !important;
    background-color: rgba(255, 107, 107, 0.1) !important;
}

.pr_links li button {
    transition: all 0.3s ease;
}

.pr_links li button:hover {
    transform: scale(1.1);
}
</style>

</html>